<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-el-tabs {
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  padding: 15px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="hex-el-tabs">
        <el-tab-pane label="有效应用" name="first">
          <appSessionList ref="appSession"/>
        </el-tab-pane>
        <el-tab-pane label="无效应用" name="second">
          <notValidAppSessionList ref="notValidAppSession"/>
        </el-tab-pane>
        <el-tab-pane label="应用Map" name="third">
          <appSessionMap ref="appSessionMap"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>


import appSessionList from '../appSession/appSessionList';
import notValidAppSessionList from '../appSession/notValidAppSessionList';
import appSessionMap from '../appSession/appSessionMap'


export default {
  name: "queueList",
  components: {appSessionList, notValidAppSessionList, appSessionMap},
  data() {
    return {
      activeName: 'first'
    };
  },
  created() {

  },
  methods: {
    handleClick(tab, event) {
      this.doQuery(tab.name);
    },
    doQuery(activeName) {
      this.activeName = activeName;
      if ('first' == activeName) {
        this.$refs.appSession.doQuery();
      }
      if ('second' == activeName) {
        this.$refs.notValidAppSession.doQuery();
      }
      if ('third' == activeName) {
        this.$refs.appSessionMap.doQuery();
      }
    }

  }
};
</script>
